import React, { useState } from 'react';
import { Badge, TabBar } from 'antd-mobile';
import { AppOutline, MessageOutline, MessageFill, AppstoreOutline, UserOutline, } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { Outlet } from 'react-router-dom';

export default function App() {
  let navigate = useNavigate()
  const tabs = [
    {
      key: '/app/home',
      title: '首页',
      icon: <AppOutline />,
      badge: Badge.dot,
    },
    {
      key: '/app/Campus',
      title: '校园跑',
      icon: <AppstoreOutline />,
      badge: '5',
    },
    {
      key: '/app/message',
      title: '消息',
      icon: (active) => active ? <MessageFill /> : <MessageOutline />,
      badge: '99+',
    },
    {
      key: '/app/user',
      title: '我的',
      icon: <UserOutline />,
    },
  ];
  return (
    <div>
      <Outlet></Outlet>
      <TabBar style={{position:"fixed",bottom:"0",width:"100vw",background:"white"}} onChange={(a)=>{navigate(a)}}>
        {tabs.map(item => (<TabBar.Item key={item.key} icon={item.icon} title={item.title} />))}
      </TabBar>
    </div>
  )
}
